<template>
  <view class="order_logisticsMode safe-bottom">
    <HeadNav page-name="物流详情" :borderType="true" :showNav="true" />
    <view>
      <view class="title linh-48">商品物流</view>
      <!-- 单个物流 -->
      <view v-if="listLength">
        <view v-for="(item, index) in logisticsDetails" :key="index" class="u-padding-left-50 u-padding-right-50 itemBox">
          <view class="fz-14 u-padding-top-10 u--padding-bottom-10"
            >{{ item.logisticsName
            }}<text class="u-padding-left-20">{{
              item.logisticsCode
            }}</text></view
          >
          <view class="u-padding-top-20 u--padding-bottom-20" v-if="item.data && item.data.length">
            <view v-for="(loca, idx) in item.data" :key="idx" class="u-p-b-20 forBox" :class="{'fiClass': idx === 0,'lastClass': (idx+1) === item.data.length}">
              <view :class="idx === 0 ? 'themeFontColor' : 'color6'">{{ loca.context }}</view>
              <view class="fz-12 viceColor u-p-t-5">{{ loca.time }}</view>
            </view>
          </view>
          <view class="u-padding-top-20 u--padding-bottom-20 tc color6" v-else>
            暂无物流
          </view>
        </view>
      </view>
      <!-- 多个物流 -->
      <view v-else>
        <view v-for="(item, index) in logisticsDetails" :key="index" class="u-padding-left-50 u-padding-right-50 itemBox">
          <view :style="!item.openStatus?'height:160rpx;overflow: hidden;':'height:auto;overflow:auto;'">
            <view class="fz-14 u-padding-top-10 u--padding-bottom-10"
              >{{ item.logisticsName
              }}<text class="u-padding-left-20">{{
                item.logisticsCode
              }}</text></view
            >
            <view class="u-padding-top-20 u--padding-bottom-20" v-if="item.data && item.data.length">
              <view v-for="(loca, idx) in item.data" :key="idx" class="u-p-b-20 forBox" :class="{'fiClass': idx === 0,'lastClass': (idx+1) === item.data.length,'noneAfter': !item.openStatus}">
                <view :class="idx === 0 ? 'themeFontColor' : 'color6'" v-if="!item.openStatus" class="textOv">{{ loca.context }}</view>
                <view :class="idx === 0 ? 'themeFontColor' : 'color6'" v-else>{{ loca.context }}</view>
                <view class="fz-12 viceColor u-p-t-5">{{ loca.time }}</view>
              </view>
            </view>
            <view class="u-padding-top-20 u--padding-bottom-20 tc color6" v-else>
              暂无物流
            </view> 
          </view>

          <view v-if="item.data && item.data.length > 1" @click="open(index)" class="tc viceColor linh-30" style="box-shadow: inset 0px 1px 0px #EEEEEE;">
            <text class="u-p-l-5 u-p-r-5">
              {{item.openStatus ? '收起' : '展开'}}
            </text>
            <u-icon name="arrow-down" class="iconArrow" color="#DCDEE0" :class="item.openStatus ? 'rotate90' : 'rotate0'"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";
import orderApi from "@/api/orderApi.js";

export default {
  components: {
    HeadNav,
  },
  data() {
    return {
      routeData: {},
      logisticsDetails: [],
      listLength: true, // 是否为单个物流
    };
  },
  onLoad(r) {
    this.routeData = r;
    this.getLogistics();
  },
  methods: {
    // 获取物流信息
    getLogistics() {
      if(this.routeData.num && this.routeData.comCode){ // 通过物流单号查询
        let params = {
           num: this.routeData.num,
           comCode: this.routeData.comCode
        }
        orderApi.queryLogistics(params).then(res=>{
          this.logisticsDetails = [{
            logisticsName: this.routeData.logisticsName,
            logisticsCode: this.routeData.logisticsCode,
            data: res.data.data
          }]
        })
      }else{ // 通过订单号查询
        orderApi.getLogistics(this.routeData).then((res) => {
          this.listLength = !(res.data && res.data.length && res.data.length > 1);
          if(!this.listLength){ // 多个物流，添加折叠状态
            res.data.forEach(v => {
              this.$set(v,'openStatus', false)
            });
          }
          this.logisticsDetails = res.data;
        });
      }
    },
    open(index){
      this.logisticsDetails[index].openStatus = !this.logisticsDetails[index].openStatus
    }
  },
};
</script>
<style lang="scss" scoped>
.order_logisticsMode {
  .title {
    padding: 0 32rpx;
    box-shadow: inset 0px -1px 0px #EEEEEE;
  }
  .color6{
    color: #666;
  }
  .bgf{
    background-color: #FFF;
  }
  .itemBox+.itemBox{
    border-top: solid 20rpx #F7F8FA;
  }
  .forBox{
    position: relative;
    padding-left: 50rpx;
    &::before{
      display: block;
      content: ' ';
      width: 16rpx;
      height: 16rpx;
      border-radius: 16rpx;
      border: solid 1px #CCC;
      position: absolute;
      left: 0;
      top: 6rpx;
    }
    &::after{
      display: block;
      content: ' ';
      width: 1px;
      height: calc(100% - 60rpx);
      background-color: #CCCCCC;
      position: absolute;
      left: 9rpx;
      top: 40rpx;
    }
  }
  .forBox.fiClass{
    &::before{
      border: solid 1px $themeColor;
      background-color: $themeColor;
    }
    &::after{
      background-color: $themeColor;
    }
  }
  .forBox.lastClass,.forBox.noneAfter{
    &::after{
      display: none;
    }
  }

  .iconArrow{
    transition: all 1s;
  }
  .iconArrow.rotate0{
    transform: rotate(0deg);
  }
  .iconArrow.rotate90{
    transform: rotate(-180deg);
  }
  .textOv{
    @include toe()
  }
}
</style>